<!DOCTYPE html>
<html lang="zh">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 登录页样式 -->
    <link rel="stylesheet" href="/static/css/LoginStyle.css">

    <!-- jQuery -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <title>信息科开放平台</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->

    <!-- 引入CSS： elementUI -->
    <link rel="stylesheet" href="/static/element-UI/index.css">
    <!-- 引入JS： Vue (before ElementUI JS)-->
    <script src="/static/vue/vue.js"></script>
    <!-- 引入JS： ElementUI JS -->
    <script src="/static/element-UI/index.js"></script>
</head>

<body style=" background: url('/static/img/LoginBegin.jpg') no-repeat;background-size:100% 100%;">

<video id="v1" autoplay muted loop style="width: 100%">
    <source src="/static/img/Login.mp4">
</video>

<style scoped>

    body {
        /* 鼠标指针的样式 */
        cursor: url(/static/img/cursor.ico), auto;
    }

    video {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -9999;
    }

    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
</style>

<section>

    <div id="app">

        <div class="login-box">
            <el-form class="login-container" label-position="left" label-width="0px" :model="formData">
                <h3 class="login_title">系统登录</h3>
                <el-form-item>
                    <el-input
                            v-model="formData.userName"
                            id="userNameInput"
                            type="text"
                            auto-complete="off"
                            placeholder="工号"
                            v-focus
                            @keyup.enter.native="usernameInput_enterKey()"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                            v-model="formData.password"
                            id="passwordInput"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            @keyup.enter.native="passwordInput_enterKey()"
                    ></el-input>
                </el-form-item>


                <el-form-item>

                    <el-select v-model="currentSelectObj" placeholder="请选择角色" size="medium" style="width:100%"
                               id="roleInput"
                               @change="onChangeElSelect($event)"
                    >
                        <el-option
                                id="optionInput"
                                v-for="item in options"
                                :key="item.roleID"
                                :label="item.roleName"
                                :value="item"
                                :disabled="item.disabled"

                        >
                        </el-option>
                    </el-select>

                </el-form-item>


                <el-form-item style="width: 100%">
                    <el-button
                            id="btn_submit"
                            type="primary"
                            style="width: 100%; background: #505458; border: none" onclick="OnClick_btnLogin()"
                    >登录
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>


    </div>
</section>


<script>

    // 本页面的vue对象
    var vue = new Vue({
        el: '#app',
        data: function () {
            return {
                formData: {
                    userName: '',
                    password: ''
                },
                currentSelectObj: {},  // EL-Select选择器选中的option对象
                options: [{
                    roleID: 1,
                    roleName: '疫苗接种',
                    value: 'YM'
                }, {
                    roleID: 2,
                    roleName: '来院登记',
                    value: 'LYDJ'
                }, {
                    roleID: 3,
                    roleName: 'PICC',
                    value: 'PICC'
                }]
            }
        },
        methods: {
            //
            // 当选从select组件选择角色后，将焦点转移到【登录按钮】
            //
            onChangeElSelect(e) {
                var timeoutObj = setTimeout(function () {
                    $("#btn_submit").focus();   // 焦点转移
                    // 清除已设置的setTimeout对象
                    clearTimeout(timeoutObj)
                }, 1 * 100); // 0.1秒

            },

            usernameInput_enterKey() {
                $("#passwordInput").focus();
            },

            passwordInput_enterKey() {
                $("#roleInput").click();
            }
        },
        // 使用directives注册v-focus全局指令
        directives: {
            focus: {
                inserted: function (el) {
                    el.querySelector('input').focus()
                }
            }
        }
    });

    var IpAndPort;
    var protocol = window.location.protocol;
    if (protocol == "file:") {
        IpAndPort = "127.0.0.1:8080";
    } else if (protocol == "http:") {
        IpAndPort = window.location.host;
    }

    if (window.location.search == "?TokenError") {
        vue.$message.error('令牌失效，请重新登录');
    }

    /**
     * 点击登录按钮
     */
    function OnClick_btnLogin() {

        /*取消默认的提交行为（submit）*/
        event.preventDefault();

        /* 传递MAP */
        var map = new Map();
        var userName = $("#userNameInput").val().trim();
        var password = $("#passwordInput").val();
        var roleID = vue.currentSelectObj.roleID;
        if (userName == "") {
            vue.$message.warning('请输入用户名');
            return;
        } else if (password == "") {
            vue.$message.warning('请输入密码');
            return;
        } else if (roleID == '' || roleID == undefined) {
            vue.$message.warning('请选择角色');
            return;
        }

        map.set("userName", userName.toUpperCase());    // 工号转大写字母
        map.set("password", password);
        map.set("roleID", roleID);

        //map转obj
        var obj = Object.create(null);
        for (var key of map) {
            obj[key[0]] = key[1];
        }

        $.ajax({
            url: "http://" + IpAndPort + "/LoginController/login",
            type: "POST",
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify(obj),
            success: function (data) {
                console.log(data);
                var jsonObj = $.parseJSON(data);
                if (jsonObj.status == true) {
                    console.log(data);
                    var jsonObj = $.parseJSON(data);
                    var token = jsonObj.detail;

                    // 解析token
                    var strings = token.split("."); //截取token，获取载体
                    var userinfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析

                    // 将token存入cookie（以后每次请求，浏览器都会自动带上cookie）
                    var now = new Date();
                    // now.setDate(now.getDate()+1);   // 一天过期
                    // document.cookie = "token="+token+";expires="+now.toGMTString();
                    document.cookie = "token=" + token + ";path=/";   // 不设置过期时间，关闭浏览器自动清除; path设置为/，允许此域名下所有路径携带cookie

                    // 登录成功，重定向至主页
                    if (vue.currentSelectObj.value == 'PICC') {
                        window.location.href = "http://" + IpAndPort + "/ViewController/PICC_CallNumber";
                    } else if (vue.currentSelectObj.value == 'YM') {
                        window.location.href = "http://" + IpAndPort + "/ViewController/YM_Home";
                    } else if (vue.currentSelectObj.value == 'LYDJ') {
                        window.location.href = "http://" + IpAndPort + "/ViewController/LYDJ_FZT";
                    }
                } else if (jsonObj.status == false) {
                    vue.$message.error(jsonObj.detail);
                }
            },
            error: function (data) {
                console.log(data);
                vue.$message.error(data);
            }
        })
        ;
    }

    //
    // 回车触发登录
    //
    // $("body").keydown(function () {
    //     if (event.keyCode == "13") {    //keyCode=13是回车键
    //         $('#btn_submit').click();
    //     }
    // });

    //鼠标点击弹出爱心❤
    jQuery(function ($) {
        showLoveWhenMouseClick(window, document);
    });

</script>
</body>
<!-- 在body之后加载鼠标点击特效的JS（鼠标点击放烟花、弹出爱心❤） -->
<script src="/static/js/mouse-click.js"></script>
</html>